<template>
    <div class="navMenu">
        <label v-for="navMenu in menuData">
            <el-menu-item
                    v-if="navMenu.childs==null&&navMenu.entity"
                    :key="navMenu.entity.id" :data="navMenu.entity.page" :index="navMenu.entity.code"
                    :route="navMenu.entity.page">
                <i :class="navMenu.entity.icon" :style="{fontSize:iconSize}"></i>
                <span slot="title">{{navMenu.entity.name}}</span>
            </el-menu-item>
            <el-submenu
                    v-if="navMenu.childs&&navMenu.entity"
                    :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.code">
                <template slot="title">
                    <i :class="navMenu.entity.icon" :style="{fontSize:iconSize}"></i>
                    <span> {{navMenu.entity.name}}</span>
                </template>
                <NavMenuChild :menuData="navMenu.childs" :showEnableOnly="showEnableOnly" :iconSize="iconSize"></NavMenuChild>
            </el-submenu>
        </label>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'NavMenuChild',
        props: ['menuData', 'showEnableOnly', 'textColor', 'iconColor', 'iconSize'],
        data() {
            return {
            }
        },
        mounted(){
            // this.loadMenus();
        },
        methods: {
        }
    }
</script>

<style scoped>
</style>